<template>
  <div class="cards">
    <div class="cards-item" v-for="(item, index) in list" :key="index">
      <div class="cards-item-top">
        <span class="cards-item-value" :style="{color: item.颜色}">{{item.值}}</span>
        <span class="cards-item-unit">{{item.单位}}</span>
      </div>
      <div class="cards-item-name">{{item.名称}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'cards',
  props: {
    list: Array
  },
  data() {
    return {
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.cards {
  display: flex;
  justify-content: space-between;
  height: 8%;

  .cards-item {
    flex: 1;
    background: url("~@/assets/qianjiang/card.png") no-repeat top/100% 100%;
    display: flex  ;
    justify-content: center;
    flex-direction: column;
    align-items: center;



    & + .cards-item {
      margin-left: 8px;
    }

    &-top {
      margin-bottom: 4%;
    }

    &-value {
      font-size: 24px;
    }

    &-unit{
      font-size: 14px;
    }
    &-name {

    }
  }
}
</style>
